<template>
<div>
  <title1></title1>
  <div class="shop">
    <p>我的购物车&nbsp;<span>共1门课程</span></p>
    <div class="title">
      <a-row>
        <a-col :span="2">
          <div>
            <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
              全选
            </a-checkbox>
          </div>
        </a-col>
        <a-col :span="10">课程名称</a-col>
        <a-col :span="4">原价</a-col>
        <a-col :span="4">优惠</a-col>
        <a-col :span="4">操作</a-col>
      </a-row>
    </div>
    <div class="center">
      <div class="shopping" v-for="(item,index) in shoppingCartList" :key="index">
        <a-row>
          <a-col :span="1">
            <div>
              <a-checkbox :checked="selectList.includes(item)" @change="onChange(item,$event)">
              </a-checkbox>
            </div>
          </a-col>
          <a-col :span="4"><img :src="item.course.bannerFileUrl" alt=""></a-col>
          <a-col :span="7">

            {{item.course.courseTitle}}
          </a-col>
          <a-col :span="4">
            <div><span>￥{{item.course.coursePrice}}</span>￥{{item.course.isDiscount==1?item.course.discountPrice:item.course.coursePrice}}
            </div>
          </a-col>
          <a-col :span="4">
            <a-tag color="#f50">
              {{item.course.discountDesc}}
            </a-tag>
          </a-col>
          <a-col :span="4">
            <a-icon type="delete" style="color: red" @click="del(item.shoppingCartId)"/>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="price">
      <div :style="{ borderBottom: '1px solid #E9E9E9' }">
        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
          全选
        </a-checkbox>
      </div>
      <div>
        <span class="total">合计:<span>&nbsp;￥00.0</span></span>
        <button>提交</button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import title1 from "@/components/title1";
import {mapState} from "vuex";
import {delShopping} from "../api/api";
export default {
  name: "shopping",
  data(){
    return{
      indeterminate: false,
      checkAll: false,
      selectList: [],
      visible:false,
    }
  },
  components:{
    title1
  },
  computed: {
    ...mapState(['shoppingCartList']),
    price() {
      const list = this.selectList.map(item => {
        if (item.course.isDiscount === '1') {
          return item.course.discountPrice
        } else {
          return item.course.coursePrice
        }
      })
      if (list.length === 0) {
        return 0
      }
      return list.reduce((a, b) => a + b).toFixed(2)
    }
  },
  methods: {


    onCheckAllChange(e) {
      this.indeterminate = false;
      if (e.target.checked) {
        this.checkAll = true;
        this.selectList = this.shoppingCartList.concat();
      } else {
        this.checkAll = false;
        this.selectList = [];
      }

    },
    onChange(ckeckitem, e) {
      if (e.target.checked) {
        this.selectList.push(ckeckitem);
      } else {
        this.selectList.splice(this.selectList.findIndex(item => item.shoppingCartId === ckeckitem.shoppingCartId), 1)
      }
      if (this.selectList.length === this.shoppingCartList.length) {
        this.checkAll = true;
        this.indeterminate = false;
      } else if (this.selectList.length < this.shoppingCartList.length && this.selectList.length != 0) {
        this.checkAll = false;
        this.indeterminate = true;
      } else {
        this.checkAll = false;
        this.indeterminate = false;
      }
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    del(e) {
      let that=this;
      this.$confirm({
        title: '你确定要删除该课程吗?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          console.log('OK');
          delShopping(e).then(() => {
            that.$store.dispatch("getShoppingCart");
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      });

    },

  },

  created() {
    this.$store.dispatch("getShoppingCart").then(res => {
      console.log(res);
    })


  }
}
</script>

<style scoped lang="less">
.shop {
  width: 1200px;
  margin: auto;
  padding: 20px;
  min-height: calc(100vh - 260px);

  p {
    font-size: 16px;
    line-height: 18px;
    padding: 0 0 20px 0;
    font-weight: 400;

    span {
      color: #999;
      font-size: 12px;
    }
  }

  .title {
    border: 1px solid #e8e8e8;
    height: 50px;
    line-height: 50px;
    background: #fafafa;
    text-align: center;
  }

  .shopping {
    border: 1px solid #e8e8e8;
    background: #fafafa;
    margin: 20px 0;
    padding: 10px 0;

    .ant-col {
      height: 90px;
      line-height: 90px;
      text-align: center;

      div {
        color: red;

        span {
          color: #999999;
          text-decoration: line-through;
        }
      }
    }

    img {
      width: 156px;
      height: 100%;
      /*margin-left: 10px;*/
    }
  }

  .price {
    background-color: #eee;
    border: 1px solid #e4e4e4;
    border-right: 0;
    height: 60px;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div:nth-of-type(1) {
      /*float: left;*/
      padding: 20px 10px;
    }

    div:nth-of-type(2) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /*float: right;*/

      .total {
        padding: 0 20px;

        span {
          font-size: 20px;
          color: #ff3900;

        }
      }

      button {
        background: #999;
        font-size: 20px;
        text-align: center;
        line-height: 60px;
        width: 120px;
        color: #fff;
        margin-top: -1px;
        float: right;
        border: none;
      }
    }
  }
}

</style>